<template>
    <div class="app-container">
        <div style="width: 600px;margin: 0 auto;">
            <el-row style="color: #409EFF;font-size: 24px;text-align: center;margin: 30px 0;">重置密码</el-row>
            <el-form label-width="120px" ref="form" :model="form" :rules="formRules">
                  <el-form-item label="登录账号" prop="logName">
                    <el-input v-model="form.logName" />
                  </el-form-item>
                  <el-form-item label="登录密码" prop="pwd">
                    <el-input v-model="form.pwd" type="password" />
                  </el-form-item>
                  <el-form-item label="手机号" prop="telephone">
                    <el-input v-model="form.telephone" />
                  </el-form-item>
                  <el-form-item label="手机验证码" prop="captcha">
                    <div style="display: flex;align-items: center;justify-content: center;">
                        <el-input v-model="form.captcha"  placeholder=""/>
                        <el-button @click="sendCode" :disabled="isSending || countdown > 0">
                              {{ isSending ? '发送中...' : countdown > 0 ? `${countdown}秒后重试` : '发送验证码' }}
                        </el-button>
                    </div>
                  </el-form-item>
            </el-form>
        </div>
        <div style="text-align: center;">
            <el-button type="primary" @click="handleSubmit">提交</el-button>
        </div>


    </div>
</template>

<script>
    import * as organInfo from "../../api/organInfo";
    import * as userInfo from "../../api/userInfo"
    import XPagination from "../../components/xpagination/XPagination";
    import * as sms from "../../api/sms"
    export default{
        name: "resetPwd",
        components: { XPagination },
        data(){
            return {
                //手机验证码
              isSending: false,
              countdown: 0,

                dialogTableVisible: false,
                searchOrgForm: {
                  creditIdentifier: "",
                  grade: "",
                  organName: "",
                  unitName: "",
                },
                tableOrgData: [],
                orgTotal: 0,
                loading: false,
                searchForm: {
                  name: "",
                  organName: "",
                  departmentName: "",
                },

                form:{
                    name:'',
                    workUnit:'',
                    organName:'',
                    logName:'',
                    pwd:'',
                    pwd2:'',
                    telephone:'',
                    captcha:'',
                    area:'',
                    dependency:'',
                },
                formRules: {
                  logName: [
                    { required: true, message: '登录账号不能为空', trigger: 'blur' },
                  ],
                  pwd: [
                    { required: true, message: '登录密码不能为空', trigger: 'blur' },
                    {
                            type: 'string',
                            message: '请输入不包含空格的字符',
                            trigger: 'blur',
                            transform(value) {
                              if (value && value.indexOf(' ') === -1) {
                                return value
                              } else {
                                return false
                              }
                            }
                          },
                          {
                            trigger: 'blur',
                            message: '密码必须由数字、字母、特殊字符组合,请输入6-16位',
                            validator: (rule, value, callback) => {
                              var passwordreg = /(?=.*\d)(?=.*[a-zA-Z])(?=.*[^a-zA-Z0-9]).{6,16}/
                              if (!passwordreg.test(value)) {
                                callback(new Error('密码必须由数字、字母、特殊字符组合,请输入6-16位'))
                              }else{
                                callback()
                              }
                            }
                          }
                  ],
                  telephone: [
                    { required: true, message: '手机号不能为空', trigger: 'blur' },
                    {
                            type: 'string',
                            message: '请输入不包含空格的字符',
                            trigger: 'blur',
                            transform(value) {
                              if (value && value.indexOf(' ') === -1) {
                                return value
                              } else {
                                return false
                              }
                            }
                          },
                          {
                            trigger: 'blur',
                            message: '手机号码格式不正确',
                            validator: (rule, value, callback) => {
                              var tel = /^1[3456789]\d{9}$/
                              if (!tel.test(value)) {
                                callback(new Error('手机号码格式不正确'))
                              }else{
                                callback()
                              }
                            }
                          }
                  ],
                  captcha: [
                    { required: true, message: '手机验证码不能为空', trigger: 'blur' },
                  ],
                },
            }
        },
        methods:{
            sendCode() {
              if(!this.form.telephone){
                  this.$message.error("请填写手机号")
                  return;
              }
              if (this.countdown > 0 || this.isSending) {
                return; // 防止重复点击发送
              }

              // 假设在这个方法中实现发送验证码的逻辑
              // 可以调用sendVerificationCode()方法发送验证码
              // 这里只是简单模拟发送过程
              this.isSending = true;
              this.startCountdown();
              sms.getSmsCaptcha(this.form.telephone).then(res=>{
                  this.isSending = false;
              })
            },

            startCountdown() {
              this.countdown = 60;
              const timer = setInterval(() => {
                this.countdown--;
                if (this.countdown <= 0) {
                  clearInterval(timer);
                }
              }, 1000);
            },


            openOrgList () {
              this.getOrgList();
              this.dialogTableVisible = true;
            },
            getOrgList (pageInfo) {
              const param = {
                ...this.searchOrgForm,
                ...pageInfo
              }
              organInfo.queryByPage(param).then(response => {
                console.log(response)
                this.tableOrgData = response.data.data.rows
                this.orgTotal = response.data.data.total
                this.loading = false
              }).catch(error => {
                console.log(error)
              })
            },
            selectOrg (index, data) {
              console.log(data)
              this.form.organName = data.organName;
              this.form.organUid = data.uid;
              this.form.organClassify = data.classification;
              this.form.grade = data.grade;
              this.form.area=data.area;
              this.form.dependency=data.dependency
              this.dialogTableVisible = false;
            },
            handleOrgSearch () {
              this.$refs.orgPageInfo.loadData()
            },
            handleSubmit () {
              this.$refs["form"].validate((valid) => {
                if (!valid) {
                  return false
                }
                const param = Object.assign({}, this.form)
                userInfo.resetPwd(param).then(result => {
                  this.$message.success("操作成功，请重新登录")
                  setTimeout(()=>{
                      this.$router.push({path:'/'})
                  },2000)

                }).catch(error => {
                  // this.$message.error(error.msg)
                  console.log(error)
                })
              })
            },
        },
    }
</script>

<style scoped lang="scss"></style>
